/*
 * @Description:
 * @Author: py
 * @Date: 2024-07-30
 */
import type { PlusColumn } from 'plus-pro-components'

import { ElCheckbox, ElCheckboxGroup } from 'element-plus'

export function useForm() {
    const levelOptions = [
        { label: '1星', value: '1' },
        { label: '2星', value: '2' },
        { label: '3星', value: '3' },
        { label: '4星', value: '4' },
        { label: '5星', value: '5' },
    ]

    const schema: PlusColumn[] = [
        {
            colProps: {
                span: 6,
            },
            label: '用户信息',
            prop: 'keyword',
            valueType: 'copy',
        },
        {
            colProps: {
                span: 10,
            },
            label: '评价星级',
            prop: 'levels',
            // 自定义表单项
            renderField: (value, onChange) => {
                const selectedValues = ref<string[]>((value as string[]) || [])

                const checkedCount = toRaw(selectedValues.value).length
                const isIndeterminate = computed(() => checkedCount > 0 && checkedCount < levelOptions.length)
                const isAllSelected = computed(() => checkedCount === levelOptions.length)
                // console.log('🚀 ~ isAllSelected.value:', isAllSelected.value)
                const toggleAllSelection = (isChecked: boolean) => {
                    if (isChecked) {
                        onChange(levelOptions.map(option => option.value))
                    }
                    else {
                        onChange([])
                    }
                }
                const handleCheckboxChange = (val: string[]) => {
                    onChange(val)
                }

                return (
                    <>
                        <ElCheckbox
                            indeterminate={isIndeterminate.value}
                            onChange={toggleAllSelection}
                            v-model={isAllSelected.value}
                        >
                            全选
                        </ElCheckbox>
                        <ElCheckboxGroup
                            class="ml-20"
                            onChange={handleCheckboxChange}
                            v-model={selectedValues.value}
                        >
                            {levelOptions.map(option => (
                                <ElCheckbox key={option.value} value={option.value}>
                                    {option.label}
                                </ElCheckbox>
                            ))}
                        </ElCheckboxGroup>
                    </>
                )
            },
            valueType: 'checkbox',
        },
        {
            colProps: {
                span: 8,
            },
            fieldProps: {
                endPlaceholder: '结束日期',
                format: 'YYYY-MM-DD',
                startPlaceholder: '开始日期',
                type: 'daterange',
                valueFormat: 'YYYY-MM-DD',
            },
            label: '评价日期',
            prop: 'evaluateDate',
            valueType: 'date-picker',
        },
    ] as const

    const state = {
        evaluateDate: null,
        keyword: '',
        levels: [],
    }
    const form = ref({
        ...state,
    })
    return { form, schema, state }
}
